<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人页面</title>
        <link rel="stylesheet" href="../../Content/bootstrap.css">
        <style media="screen">
        .{
            padding:0px; margin:0px;
        }
        a{
            text-decoration: none;
        }
        ul{
            padding: 0px;
        }
        body{
            background-color: #eee;
        }
        #main{
            width:80%;
            margin:50px auto;
        }
        #nav{
            width:100%;
            height:40px;
            border-radius: 5px;
            background-color:rgb(226, 82, 20);
            color:#fff;
            line-height: 38px;
            margin-bottom: 20px;
        }
        #nav>a{
            display: block;
            height:40px;
            width: 8%;
            line-height: 40px;
            text-align: center;
            color:#fff;
            border-radius: 5px;
            float: left;
        }
        #nav>a:hover{
            background-color: rgb(144, 9, 9);
        }
        /* personal data */
        #data{
            overflow: hidden;
            border-radius: 5px;
        }
        #left{
            width: 20%;
            float: left;
            background-color: #ddd;
            height: 500px;
        }
        #list{
            line-height: 36px;
        }
        /* left link */
        #list>li>a{
            text-indent: 20px;
            display: block;
            color:#678;
            width: 100%;
        }
        #list>li>a:hover{
            background-color: #ccc;
            color:#123;
        }
        /* right side */
        #right{
            background-color: #fff;
            width: 80%;
            float: right;
            height: 500px;
        }
        #right-top{
            height: 50px;
            border-bottom: 1px solid #ccc;
            background-color: #efe;
            line-height: 50px;
            text-indent: 10px;
        }
        #right-main{
            padding-left: 50px;
            padding-top: 10px;
        }
        #right-main>table>tr>td>input{
            display: inline-block;
            width: 100px;
        }
        </style>
    </head>
    <body>
        头部留白
        <div id="main">
            <div id="nav">
                <a href="#">首 页</a>
                <a href="#">购物车</a>
                <!-- 个人中心搜索框 -->
                <div style="padding-top:7px;padding-right:10px;">
                    <div style="width:30%; float:right; overflow:hidden; display:inline-block;height:26px;" class="input-group">
                        <input type="text" class="form-control" style="float:left;width:70%;height:26px;"/>
                        <!-- button -->
                        <input class="btn btn-default input-group-btn" type="button" value="搜索" style="float:left;width:30%;height:26px;line-height:10px;"/>
                    </div>
                </div>
            </div>
            <!-- 资料 -->
            <!-- left:3 right:7 -->
            <div id="data">
                <!-- left side -->
                <div id="left">
                    <div style=" width:150px; height:150px; border:5px solid #fff; margin:20px auto; background-image:url('./2.jpg'); background-size:100% 100%;">
                    </div>
                    <!-- 帐号 -->
                    <h4 style="text-align:center;"><strong>帐号管理</strong></h4>
                    <ul id="list">
                        <li><a href="#"><span class="glyphicon glyphicon-user">个人资料</span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-wrench">更多</span></a></li>
                    </ul>
                </div>
                <!-- right side -->
                <div id="right">
                    <div id="right-top">
                        <span class="glyphicon glyphicon-user" style="font-size:20px;">个人资料<span>
                    </div>
                    <!-- 个人资料修改处 -->
                    <div id="right-main">
                        <table>
                            <tr>
                                <th colspan="2"><h3 style="color:#000;">亲爱的 vip</h3></th>
                            </tr>
                            <tr height="50px">
                                <td width="200px;"><label>用户名:</label></td>
                                <td width="300px;"><input type="text"/></td>
                            </tr>
                            <tr height="50px">
                                <td width="200px;"><label>电话:</label></td>
                                <td width="300px;"><input type="text"/></td>
                            </tr>
                            <tr height="50px">
                                <td><label>邮箱:</label></td>
                                <td><input type="email"></td>
                            </tr>
                            <tr height="50px">
                                <td><label>旧密码:</label></td>
                                <td><input type="text"></td>
                            </tr>
                            <tr height="50px">
                                <td><label>新密码:</label></td>
                                <td><input type="password"></td>
                            </tr>
                            <tr height="50px">
                                <td><label>再次输入新密码:</label></td>
                                <td><input type="password"></td>
                            </tr>
                            <tr>
                                <td colspan="2"><input type="submit" class="btn btn-default" style="background-color:rgb(204, 143, 26);color:#fff;"/></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
